<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<!-- 一定要先导入vue.js，然后再导入vue-router.js，因为后者依赖前者 -->

<script src="vue-router.js"></script>
<body>
    <div id="app">
        <!-- 4.在el里，给路由匹配到的组件，站位 -->
        <!-- <a href="#/login">登录</a>
        <a href="#/reg">注册</a> -->
        <router-link to="login">登录</router-link>
        <router-link to="reg">注册</router-link>
        <router-view> </router-view>
    </div>
    <template id="login">
        <div>
            <h1>这是登录的组件</h1>
        </div>
    </template>

    <template id="reg">
        <div>
            <h1>这是注册的组件</h1>
        </div>
    </template>

    <script>
        // 1.路由：是一个网络工程的术语
        // 2.jsp,asp,asp.net,php
        // web开发中的路由：后端的路由，前端的路由
        // www.barteam.com/goods/list/type/1001   后端的路由
        // www.barteam.com/goodslist.aspx?goodsType=1001&goodsSize=ml  前端路由

        // SPA：单页面应用程序
        // 在Vue.js框架下，要依赖一个叫做Vue-router.js的包


        // 1.声明2个组件模板对象
        var login = {template:'#login'};
        var reg = {template:'#reg'};

        // 2.创建路由对象
         var router = new VueRouter({
                routes:[
                    // 这个routes是个数组，是用来声明你的路由匹配规则
                    {path:'/login', component:login},  //这里component属性的值，要的是要路由到的模板对象的名字
                    {path:'/reg',component:reg}
                ]
         })


        var vm = new Vue({
            el:'#app',
            // 3把路由对象挂载到vm身上
            router:router,
        })


    </script>
</body>
</html>